<template>
    <div>
        <!-- 注册页面 -->

        <!-- 顶部 -->
        <div class="register-top w">
            <div class="logo">
                <!-- 放一个h1标签，目的是为了提权，logo seo优化 -->
                <h1>
                    <a href="index.html" title="品优购">品优购</a>
                </h1>
            </div>
        </div>
        <!-- 内容 -->
        <div class="register-cont w">
            <div class="register-td">
                注册新用户
                <p>我有账号 去<router-link to="/login" class="style_red">登录</router-link>
                </p>
            </div>
            <div class="register-hd">
                <form action="">
                    <ul>
                        <li>
                            <label for="usrename">手机号：</label>
                            <input type="text" placeholder="手机号" id="usrename" class="usrename" v-model="phone"
                                name="phone"
                                v-validate="{required:true,regex:  /^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/ }"
                                :class="{ invalid: errors.has('phone') }">
                            <span class="error">{{errors.first("phone")}}</span>
                        </li>
                        <li>
                            <label for="code">验证码：</label>
                            <input type="text" placeholder="验证码" id="code" class="usrename" v-model="code">
                            <span style="border:1px solid" @click="getCode">获取验证码</span>
                        </li>
                        <li>
                            <label for="password">密码：</label>
                            <input type="password" placeholder="密码" id="password" class="password" name="password"
                                v-model="password"
                                v-validate="{required:true,regex:  /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,20}$/ }"
                                :class="{ invalid: errors.has('password') }">
                            <span class="error">{{errors.first("password")}}</span>
                        </li>
                        <li class="safe-level">
                            安全程度
                            <i>弱</i>
                            <i>中</i>
                            <i>强</i>
                        </li>
                        <li>
                            <label for="password1">确认密码：</label>
                            <input type="password" placeholder="密码" id="password1" class="password" v-model="password1"
                                name="password1" v-validate="{required:true,is:password }"
                                :class="{ invalid: errors.has('password1') }">
                            <span class="error">{{errors.first("password1")}}</span>
                        </li>
                        <li class="youxiang">
                            <a>切换邮箱注册</a>
                        </li>
                        <li class="agreen">
                            <div>
                                <input type="checkbox" :checked="agreen" name="ischeck"
                                    v-validate="{required:true,tongyi:true }"
                                    :class="{ invalid: errors.has('ischeck') }">
                                <i>同意</i>
                                <a class="style_red"> 《用户协议》</a>
                            </div>
                            <div class="xieyi error">{{errors.first("ischeck")}}</div>

                        </li>
                        <li>
                            <button @click="userRegister">
                                <router-link to="/login">注 册</router-link>
                            </button>
                        </li>
                    </ul>

                </form>
            </div>

        </div>

        <!-- 底部 -->
        <div class="mod_copyright w">
            <p><a href="#">关于我们</a>| <a href="#">联系我们</a> | <a href="#">联系客服</a> | <a href="#">商家入驻</a> | <a
                    href="#">营销中心</a> |
                <a href="#">手机品优购</a> | <a href="#">友情链接</a> | <a href="#">销售联盟</a> | <a href="#">品优购社区</a> |
                <a href="#">品优购公益</a> | <a href="#">English Site</a>| <a href="#">Contact U</a>
            </p>
            <p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'RegisterIndex',
    data() {
        return {
            phone: '',
            code: '', //验证码有接口
            password: '',
            password1: '',
            agreen: true
        }
    },
    methods: {
        // 获得验证码
        async getCode() {
            if (this.phone == '')
                alert('验证码无效')
            else {
                await this.$store.dispatch('user/getCodeData', this.phone)

                this.code = this.$store.state.user.codeData
            }

        },
        // 用户注册
        //  当所有的表单验证正确，再向服务器发请求
        async userRegister() {
            const success = await this.$validator.validateAll();
            // 全部表单验证成功再向服务器发请求
            if (success) {
                try {
                    const { phone, code, password, password1 } = this;
                    phone && code && (password == password1) && await this.$store.dispatch('user/userRegister', { phone, code, password })
                    this.$router.push('/login')
                } catch (error) {
                    alert(error.message)
                }
            }

        }
    },
    mounted() {
    }


}
</script>

<style scoped>
.register-cont .register-hd .xieyi {
    margin-left: 210px;
}

* {
    margin: 0 auto;
}

.register-top {
    /* width: 1200px; */
    height: 96px;
    border-bottom: 2px solid #b1191a;
}

.register-cont {
    /* width: 1200px; */
    height: 500px;
    border: 1px solid #ccc;
}

.register-td {
    height: 40px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    line-height: 40px;
    background-color: rgb(221, 220, 220);
    margin-top: 15px;
    padding: 0 10px;
}

.register-td p {
    display: inline-block;
    font-size: 10px;
    float: right;
}

.register-hd {
    width: 600px;
    margin-top: 50px;
}

.register-hd label {
    display: inline-block;
    width: 68px;
    text-align: center;
}

.register-hd ul li {
    margin-bottom: 20px;
}

.register-hd ul li input {
    width: 242px;
    height: 36px;
    border: 1px solid #999999;
    padding-left: 5px;
}

.register-hd .error {
    color: red;
}

.safe-level {
    margin-left: 212px;
    color: #c1c0c0;
}

.safe-level i {
    color: white;
}

.safe-level i:first-child {
    background-color: red;
}

.safe-level i:nth-child(2) {
    background-color: rgb(207, 207, 80);
}

.safe-level i:last-child {
    background-color: green;
}

.youxiang {
    margin-left: 242px;
}

.agreen {
    height: 30px;
    line-height: 30px;
    position: relative;
    left: 100px;
}

.agreen input[type="checkbox"] {
    display: block;
    position: absolute;
    top: 7px;
    width: 15px;
    height: 15px;
}

.agreen a {
    position: absolute;
    left: 37px;
    cursor: pointer;
}

.agreen i {
    position: absolute;
    left: 17px;
}

.register-hd li button {
    height: 40px;
    width: 250px;
    left: 20px;
    margin-left: 68px;
    background-color: #b1191a;
    font-weight: bold;
}
</style>